<template>
  <img ref="imgdom" v-show="!loading" @load="loading=false"/>
  <div class="empty" v-if="loading"></div>
</template>

<script>
import { getCurrentInstance, onMounted,computed, ref } from 'vue'
export default {
 props:{
  src:{
    type:String
  }
 },
  setup(props){
    const instance = getCurrentInstance()
    const loading = ref(false)
    const handleSrc= computed(()=>{
      if(/http/.test(props.src)){
        return props.src
      }else{
        return process.env.VUE_APP_IMG_BASE+props.src
      }
    })
    onMounted(()=>{
      const observe = new IntersectionObserver(entryArr=>{
        const img=entryArr[0].target
        if(entryArr[0].isIntersecting){
          // 进入可视区
          img.setAttribute('src',handleSrc.value)
          loading.value=true
          observe.unobserve(img)
        }
      })
      observe.observe(instance.refs.imgdom)
    })

    return {
      loading,
    }
  }
  
}
</script>

<style lang="scss" scoped>
.empty{
  width: 100%;
  height: 100%;
  background-color: #99a9bf;
  backdrop-filter: blur(10px);
}
</style>